<template>
  <view class="orderDetails">
    <view class="Details-content">
      <view :class="'details-tips ' + orders.status_display">
        <view class="details-tips-left">
          {{ statusView(orders.status_display) }}
        </view>
        <view class="details-tips-right">
          {{ statusTitle(orders.status_display) }}
        </view>
      </view>
      <orderSwiper :dataswiper="orders" />
      <view class="Details">
        <p class="order-title">订单详情</p>

        <p class="order-text">
          <span>订单编号</span>
          <span>{{ orders.uid }}</span>
        </p>
        <p class="order-text">
          <span>创建时间</span>
          <span>{{ orders.created_at }}</span>
        </p>
        <p v-if="orders.status != 98 && orders.status != 11" class="order-text">
          <span>支付单号</span>
          <span>{{ orders.wechat_payment_id }}</span>
        </p>
        <p v-if="orders.status != 98 && orders.status != 11" class="order-text">
          <span>支付时间</span>
          <span>{{ orders.payment_datetime }}</span>
        </p>
        <p class="order-text">
          <span>订单金额</span>
          <span>￥{{ orders.payment_amount }}</span>
        </p>

        <p v-if="orders.status != 98 && orders.status != 11" class="order-text-tips">
          <span>实付金额</span>
          <span>￥{{ orders.payment_actual_payment }}</span>
        </p>
      </view>
    </view>
    <view class="operation">
      <view @click="postSale">申请售后</view>
      <button class="oper-Service" open-type="contact">联系客服</button>
      <view v-if="orders.status === 11" @click="toPlay(orders)">立即支付</view>
    </view>
  </view>
</template>

<script>
import orderSwiper from '@com/mine/orderSwiper'
import { ticketPayment } from '@api/order'
import { orderDetails } from '@api/mine'
import { showToast } from '@utils/myApproach'

export default {
  components: {
    orderSwiper
  },
  data() {
    return {
      orders: {},
      endTime: '00:00:00'
    }
  },
  onLoad: function(option) {
    this.uid = option.uid
    orderDetails(option.uid).then((res) => {
      this.orders = res.data.data
      if (this.orders.status === 11) {
        this.timevalId = setInterval(() => {
          this.dow()
        }, 1000)
      }
    })
  },
  methods: {
    dow() {
      const delTime = new Date(this.orders.payment_deadline)
      const newTime = new Date()

      const times = parseInt((delTime.getTime() - newTime.getTime()) / 1000)
      if (times > 0) {
        const day = parseInt(times / (24 * 60 * 60))

        const hour = this.forData(parseInt((times % (24 * 60 * 60)) / (60 * 60)))

        const minute = this.forData(parseInt((times % (60 * 60)) / 60))

        const second = this.forData(times % 60)

        this.endTime = `${day * 24 + parseInt(hour)}:${minute}:${second}`
      } else {
        clearInterval(this.timevalId)
        orderDetails(this.orders.uid).then((res) => {
          this.orders = res.data.data
        })
      }
    },
    forData(foo) {
      if (foo < 10) {
        return '0' + foo
      } else {
        return foo
      }
    },
    postSale() {
      uni.showToast({
        title: '敬请期待',
        icon: 'none'
      })
    },

    // 支付
    toPlay(order) {
      ticketPayment('ubrOrder', order.uid).then(res => {
        this.query = res.data.data
      }).then(res => {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: String(this.query.timeStamp),
          nonceStr: this.query.nonceStr,
          package: this.query.package,
          signType: this.query.signType,
          paySign: this.query.paySign,
          success: () => {
            uni.redirectTo({
              url: `/pages/payment/paymentOrder?query=${JSON.stringify(
                order
              )}`
            })
          },
          fail: () => {
            showToast('未支付成功，请及时支付订单')
          }
        })
      })
    },

    // 状态渲染
    statusView(status_value) {
      switch (status_value) {
        case 'UNPAID':
          return '待付款'
        case 'PROCESS':
          return '处理中'
        case 'COMPLETED':
          return '已完成'
        case 'NORMAL':
          return '可使用'
        case 'BUY_FILED':
          return '购买失败'
        case 'REFUND_PROCESS':
          return '退款处理中'
        case 'REFUND':
          return '退款成功'
        case 'EXCHANGED_PROCESS':
          return '改签处理中'
        case 'CLOSE':
          return '已关闭'
        default:
          return '未定义'
      }
    },
    statusTitle(status_value) {
      switch (status_value) {
        case 'UNPAID':
          return `距离订单关闭还有${this.endTime}`
        case 'NORMAL':
          return '您的订单出票成功，等待使用'
        case 'PROCESS':
          return '票务系统正在处理您的订单'
        case 'CLOSE':
          return '您未在支付时间内完成付款，订单已关闭'
        case 'BUY_FILED':
          return '支付款项将与48小时内原路返回'
        case 'REFUND_PROCESS':
          return '系统已收到您的退款申请，将在24小时内处理'
        case 'REFUND':
          return '系统已审批您的退款申请，支付款项将于48小时内原路返还'
        case 'EXCHANGED_PROCESS':
          return '系统已收到您的改签处理，正在处理中'
        default:
          return '未知状态'
      }
    }
  },
  onPullDownRefresh() {
    orderDetails(this.uid).then((res) => {
      uni.stopPullDownRefresh()
      this.orders = res.data.data
      if (this.orders.status === 11) {
        this.timevalId = setInterval(() => {
          this.dow()
        }, 1000)
      }
    })
  }
}
</script>

<style >
.orderDetails {
  min-height: 100vh;
  background-color: #f8f8f8;
  box-sizing: border-box;
  padding: 0rpx 20rpx 30rpx 20rpx;
}
.Details-content {
  height: calc(100vh - 120rpx);
  box-sizing: border-box;
  overflow: auto;
  padding-bottom: 40rpx;
}
.details-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-top: 30rpx;
  box-sizing: border-box;
  width: 710rpx;
  height: 112rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.details-tips-left {
  text-align: center;
  line-height: 50rpx;
  color: #ffffff;
  border-radius: 8rpx;
  min-width: max-content;
  padding:4rpx 20rpx;
  margin-right: 20rpx;
}
.oper-Service {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}
.oper-Service::after {
  border: none;
}

.NORMAL {
  background-color: rgba(43, 204, 120, 0.1);
}
.NORMAL .details-tips-left {
  background-color: #2dcc79;
}
.NORMAL .details-tips-right {
  color: #2bcc78;
}

.PROCESS {
  background-color: rgba(255, 164, 89, 0.1);
}
.PROCESS .details-tips-left {
  background-color: #ffa459;
}
.PROCESS .details-tips-right {
  color: #ff9740;
}

.UNPAID {
  background-color: rgba(248, 108, 108, 0.1);
}
.UNPAID .details-tips-left {
  background-color: #f86c6c;
}
.UNPAID .details-tips-right {
  color: #f86c6c;
}

.CLOSE {
  box-shadow: 0 0 10rpx #cccccc;
  background-color: rgba(204, 204, 204, 0.1);
}
.CLOSE .details-tips-left {
  background-color: #cccccc;
}
.CLOSE .details-tips-right {
  color: #9b9b9b;
}

.REFUND ,.BUY_FILED{
  box-shadow: 0 0 10rpx #cccccc;
  background-color: rgba(69, 136, 255, 0.1);
}
.REFUND .details-tips-left,.BUY_FILED .details-tips-left {
  background-color:#4588FF;
}
.REFUND .details-tips-right,.BUY_FILED .details-tips-right {
  color:#4588FF;
}

.Details {
  width: 710rpx;
  border-radius: 8rpx;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 30rpx;
  padding-top: 0;
  margin-top: 30rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}
.order-title {
  font-size: 32rpx;
  font-weight: 600;
  padding: 30rpx 0;
}
.order-text {
  box-sizing: border-box;
  padding: 10rpx 0;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  font-weight: 400;
}
.order-text-tips {
  box-sizing: border-box;
  border-top: 1px solid #f1f1f1;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  font-weight: 400;
}
.order-text-tips > span:nth-child(2) {
  font-weight: 600;
  font-size: 32rpx;
  color: #dd3939;
}

.operation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 30rpx;
  width: 100vw;
  height: 120rpx;
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.operation > view,.oper-Service {
  width: 172rpx;
  height: 64rpx;
  margin: 0 22rpx;
  border: 2rpx solid #306de9;
  border-radius: 8rpx;
  background-color: transparent;
  color: #306de9;
  font-size: 28rpx;
  text-align: center;
  line-height: 64rpx;
}
</style>
